---
order: 5.8
category: '@threlte/extras'
title: <Outlines>
sourcePath: 'packages/extras/src/lib/components/Outlines/Outlines.svelte'
type: 'component'
componentSignature:
  {
    'props':
      [
        {
          name: 'color',
          type: 'THREE.ColorRepresentation',
          required: false,
          default: 'black',
          description: 'Outline color'
        },
        {
          name: 'screenspace',
          type: 'boolean',
          required: false,
          default: 'false',
          description: 'Line thickness is independent of zoom'
        },
        {
          name: 'opacity',
          type: 'boolean',
          required: false,
          default: '1',
          description: 'Outline transparency'
        },
        {
          name: 'thickness',
          type: 'number',
          required: false,
          default: '0.05',
          description: 'Outline thickness'
        },
        { name: 'toneMapped', type: 'boolean', required: false, default: 'true' },
        { name: 'angle', type: 'number', required: false, default: 'Math.PI' },
        { name: 'polygonOffset', type: 'boolean', required: false, default: 'false' },
        { name: 'polygonOffsetFactor', type: 'number', required: false, default: '0' },
        { name: 'renderOrder', type: 'number', required: false, default: '0' }
      ]
  }
---

A port of the drei [`<Outlines>`](https://github.com/pmndrs/drei?tab=readme-ov-file#outlines) component.

An ornamental component that extracts the geometry from its parent and displays an [inverted-hull outline](https://bnpr.gitbook.io/bnpr/outline/inverse-hull-method). Supported parents are `Mesh`, `SkinnedMesh` and `InstancedMesh`.

<Example path="extras/outlines" />

<small>
  Model: Battle Damaged Sci-fi Helmet by [theblueturtle\_](https://sketchfab.com/theblueturtle_)
</small>

### Example

```svelte
<script lang="ts">
  import { BoxGeometry, MeshBasicMaterial } from 'three'
  import { T } from '@threlte/core'
  import { Outlines } from '@threlte/extras'
</script>

<T.Mesh
  geometry={new BoxGeometry()}
  material={new MeshBasicMaterial()}
>
  <Outlines color="black" />
</T.Mesh>
```
